<template>
  <div class="b-list">
    <div class="b-item" v-for="item in listData">
      <div class="b-label">{{item.label}}</div>
      <div class="b-value">{{item.value|numberFormate}}处</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "b-list",
    props: {

    },
    components: {},
    data() {
      return {
        listData:[]
      }
    },
    filters:{
      numberFormate (arg) {
        let num = (arg || 0).toString();
        let result = '';
        while (num.length > 3) {
          result = ',' + num.slice(-3) + result;
          num = num.slice(0, num.length - 3);
        }
        if (num) { result = num + result; }
        return result;

      }
    },
    methods: {
      changeListData(data){
        this.listData=[
          {
            label:'人工巡检工程',
            value:data[0]
          },
          {
            label:'设备巡检工程',
            value:data[1]
          },
          {
            label:'实时监测数据采集',
            value:data[2]
          },
          {
            label:'传感器数量',
            value:data[3]
          },
        ];
      }
    }
  }
</script>

<style lang="scss" scoped>
  .b{

    &-list{
      padding: 20px 28px;
      background: $border-1;
      border-radius: 10px;

      display: flex;
      flex-direction: column;
    }

    &-item{
      flex: 1;
      display: flex;
      align-items: center;

      white-space: nowrap;
    }

    &-label{
      flex:auto;

      font-weight: bold;
      font-size:1.1rem;
    }

    &-value{
      color:$text-2;
      font-weight: bold;
      font-size:1.4rem;
    }

  }
</style>